<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>条件渲染</title>
</head>
<body>
    <div id="div">
        <!-- 判断num的值，对3取余
            余数为0显示div1
            余数为1显示div2
            余数为2显示div3 -->
        <div v-if="num%3==1">num整除3余1</div>
        <div v-else-if="num%3==2">num整除3余2</div>
        <div v-else>num整除3没有余数</div>

        性别
        <span v-if="sex=='男'">
        </span>
        <span v-else>男
        </span>


        <div v-show="sex=='男'">就要做苦力</div>

        <!--
           v-if  v-show 他们俩虽然都是控制元素是否显示，但是底层的原理不一样
               v-if 如果条件为false，页面中根本没有这个元素
               v-show如果条件为false，页面中有这个元素只不过它的display属性值为none
       -->
    </div>
</body>
<script src="js/vue.js"></script>
<script>
    new Vue({
        el:"#div",
        data:{
            num:3,
            flag:true,
            sex:"女"
        }
    });
</script>
</html>